//需求1：用户在页面中点击页面，把点击的位置的横纵坐标收集起来并展示出来
import {
  onBeforeUnmount, onMounted, ref
} from "vue";
export default function () {
  const x = ref(-1);
  const y = ref(-1);

  //点击事件的回调函数
  const clickHandler = (event: MouseEvent) => {
    //console.log(event)
    x.value = event.pageX;
    y.value = event.pageY;
  }

  //页面已经加载完毕，再进行点击的操作
  //页面加载完毕的生命周期
  onMounted(() => {
    window.addEventListener('click', clickHandler);
  })
  //页面卸载前的生命周期组合API
  onBeforeUnmount(() => {
    window.removeEventListener('click', clickHandler);
  })
  return {
    x,
    y
  }
}